<template>
  <div class="app-container">
    <div class="view-title">用户管理</div>

    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="appId"
          placeholder="请输入userId"
          style="width: 240px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSearch">搜索</el-button>
        <el-button type="primary" @click="handlerAllList">导出全部</el-button>
        <el-button type="primary" @click="handlerCid">导出cid</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="userTableData"
      v-loading="loading"
      element-loading-text="正在加载中"
      :header-cell-style="{
        borderColor: '#F0F0F0',
        height: '51px',
        background: '#F0F0F0',
        color: '#333',
      }"
      :row-style="{ height: '51px' }"
      :cell-style="{ borderColor: '#F0F0F0' }"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="avatar" label="头像" align="center">
        <template slot-scope="scope">
          <img
            :src="scope.row.avatar ? scope.row.avatar : defaultAvatar"
            alt=""
            class="avatar_img"
          />
        </template>
      </el-table-column>
      <el-table-column prop="nick" label="昵称" align="center">
        <template slot-scope="scope">{{
          scope.row.nick ? scope.row.nick : "默认用户"
        }}</template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center" width="60">
        <template slot-scope="scope">{{
          scope.row.age ? scope.row.age : "未知"
        }}</template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="center" width="60">
        <template slot-scope="scope">{{
          scope.row.sex ? scope.row.sex : "未知"
        }}</template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>
      <el-table-column prop="address_phone" label="购卡手机号" align="center">
      </el-table-column>
      <el-table-column prop="user_id" label="用户id" align="center">
      </el-table-column>
      <el-table-column prop="cid" label="用户cid" align="center">
      </el-table-column>
      <el-table-column prop="level" label="用户等级" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level == 0">普通用户</el-tag>
          <el-tag v-else-if="scope.row.level == 1" type="warning"
            >分销员</el-tag
          >
          <el-tag v-else-if="scope.row.level == 2" type="danger">合伙人</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="belong_agent_id"
        label="所属合伙人id"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="agent_id" label="合伙人id" align="center">
      </el-table-column>
      <!-- <el-table-column prop="wx_open_id" label="微信openId" align="center">
      </el-table-column> -->
      <el-table-column
        prop="latest_online_at"
        label="最后在线时间"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleCheckPerson(scope.row)"
            type="text"
            size="small"
            v-permission="['userManagement:showMsg']"
            >查看个人消息
          </el-button>

          <el-button
            @click="handleCheckBalance(scope.row)"
            type="text"
            size="small"
            v-permission="['userManagement:showPrice']"
            >查看余额
          </el-button>

          <!-- <el-button
                @click="handleCheckSource(scope.row)"
                type="text"
                size="small"
                >查看余额来源</el-button
              > -->
        </template>
      </el-table-column>
    </el-table>

    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getAppUserList,
  getAppUserBalancesInfo,
  getAppUserBalanceTypeInfo,
} from "@/api/userManagement.js";
export default {
  name: "userManagement",
  data() {
    return {
      userTableData: [],
      phone: "",
      appId: "",
      pageNow: 1,
      pageSize: 10,
      total: null,
      userId: "",
      balanceId: "",
      balancePrice: "",
      sourceId: "",
      sourePrice: "",
      loading: true,
      defaultAvatar: require("@/assets/userManagement/img-default-avatar.png"),
    };
  },
  mounted() {
    this.getAppUserList(0);
  },
  methods: {
    // 获取全部app用户
    getAppUserList(val) {
      getAppUserList({
        phone: this.phone,
        user_id: this.appId,
        is_export: val,
        page_now: this.pageNow,
        page_size: this.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.loading = false;
          this.userTableData = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.loading = false;
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 获取用户余额
    getAppUserBalancesInfo() {
      getAppUserBalancesInfo({
        user_id: this.balanceId,
      }).then((res) => {
        if (res.code == 1) {
          this.balancePrice = res.data.balance;
          this.$notify({
            dangerouslyUseHTMLString: true,
            message: `<strong>当前余额：${this.balancePrice}元</strong>`,
          });
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 获取一个余额来源
    // getAppUserBalanceTypeInfo() {
    //   getAppUserBalanceTypeInfo({
    //     id: this.sourceId,
    //   }).then((res) => {
    //     if(res.code == 1) {
    //       this.sourePrice = res.data
    //     } else {
    //       this.$message.error(res.msg);
    //       return;
    //     }
    //   });
    // },

    // 搜索
    handlerSearch() {
      this.getAppUserList(0);
    },

    // 导出全部
    handlerAllList() {
      location.href =
        "https://app.server.jkcae.com/app/getAppUserList?phone=" +
        this.phone +
        "&user_id=" +
        this.appId +
        "&is_export=" +
        "1" +
        "&page_now=" +
        this.pageNow +
        "&page_size=" +
        this.pageSize;
    },

    // 导出cid
    handlerCid() {
      location.href =
        "https://app.server.jkcae.com/app/getAppUserList?phone=" +
        this.phone +
        "&user_id=" +
        this.appId +
        "&is_export=" +
        "2" +
        "&page_now=" +
        this.pageNow +
        "&page_size=" +
        this.pageSize;
    },

    // 查看个人消息
    handleCheckPerson(val) {
      this.$router.push({
        name: "personalInformation",
        query: {
          id: val.user_id,
        },
      });
    },

    // 查看余额
    handleCheckBalance(val) {
      this.balanceId = val.user_id;
      this.getAppUserBalancesInfo();
    },

    // 查看余额来源
    // handleCheckSource(val) {
    //   this.sourceId = val.id;
    //   this.getAppUserBalanceTypeInfo();
    // },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAppUserList(0);
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.pageSize = 10;
      this.getAppUserList(0);
    },
  },
};
</script>

<style scoped lang="scss">
.top_box {
  display: flex;
  padding: 0 0 30px 0;

  .search_btn {
    margin-left: 10px;
  }
}

.avatar_img {
  width: 50px;
  height: 50px;
  border-radius: 8%;
}
</style>
